M

MLOG

ಕನ್ನಡ

ರಿಯಾಕ್ಟ್ ಕಸ್ಟಮ್ ಹುಕ್ಸ್ ಬಳಸಿ ಕಾಂಪೊನೆಂಟ್ ಲಾಜಿಕ್ ಅನ್ನು ಹೊರತೆಗೆಯುವುದು ಮತ್ತು ಮರುಬಳಕೆ ಮಾಡುವುದು ಹೇಗೆಂದು ತಿಳಿಯಿರಿ, ಇದು ಕೋಡ್ ನಿರ್ವಹಣೆ, ಪರೀಕ್ಷೆ ಮತ್ತು ಅಪ್ಲಿಕೇಶನ್ ವಿನ್ಯಾಸವನ್ನು ಸುಧಾರಿಸುತ್ತದೆ.

ರಿಯಾಕ್ಟ್ ಕಸ್ಟಮ್ ಹುಕ್ಸ್: ಮರುಬಳಕೆಗಾಗಿ ಕಾಂಪೊನೆಂಟ್ ಲಾಜಿಕ್ ಅನ್ನು ಹೊರತೆಗೆಯುವುದು

ರಿಯಾಕ್ಟ್ ಹುಕ್ಸ್ ನಾವು ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಬರೆಯುವ ವಿಧಾನದಲ್ಲಿ ಕ್ರಾಂತಿಯನ್ನುಂಟುಮಾಡಿದೆ, ಇದು ಸ್ಟೇಟ್ ಮತ್ತು ಸೈಡ್ ಎಫೆಕ್ಟ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಹೆಚ್ಚು ಸುಂದರವಾದ ಮತ್ತು ಸಮರ್ಥವಾದ ಮಾರ್ಗವನ್ನು ನೀಡುತ್ತದೆ. ಲಭ್ಯವಿರುವ ವಿವಿಧ ಹುಕ್ಸ್‌ಗಳ ಪೈಕಿ, ಕಸ್ಟಮ್ ಹುಕ್ಸ್ ಕಾಂಪೊನೆಂಟ್ ಲಾಜಿಕ್ ಅನ್ನು ಹೊರತೆಗೆಯಲು ಮತ್ತು ಮರುಬಳಕೆ ಮಾಡಲು ಪ್ರಬಲವಾದ ಸಾಧನವಾಗಿ ಎದ್ದು ಕಾಣುತ್ತದೆ. ಈ ಲೇಖನವು ರಿಯಾಕ್ಟ್ ಕಸ್ಟಮ್ ಹುಕ್ಸ್‌ಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಮತ್ತು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿಯನ್ನು ಒದಗಿಸುತ್ತದೆ, ಇದು ನಿಮಗೆ ಹೆಚ್ಚು ನಿರ್ವಹಿಸಬಲ್ಲ, ಪರೀಕ್ಷಿಸಬಲ್ಲ ಮತ್ತು ವಿಸ್ತರಿಸಬಲ್ಲ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಅಧಿಕಾರ ನೀಡುತ್ತದೆ.

ರಿಯಾಕ್ಟ್ ಕಸ್ಟಮ್ ಹುಕ್ಸ್ ಎಂದರೇನು?

ಸಾರಾಂಶದಲ್ಲಿ, ಕಸ್ಟಮ್ ಹುಕ್ ಎನ್ನುವುದು "use" ನಿಂದ ಪ್ರಾರಂಭವಾಗುವ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫಂಕ್ಷನ್ ಆಗಿದ್ದು, ಇದು ಇತರ ಹುಕ್ಸ್‌ಗಳನ್ನು ಕರೆಯಬಹುದು. ಇದು ಕಾಂಪೊನೆಂಟ್ ಲಾಜಿಕ್ ಅನ್ನು ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಫಂಕ್ಷನ್‌ಗಳಾಗಿ ಹೊರತೆಗೆಯಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ಇದರಿಂದಾಗಿ ಕೋಡ್ ಪುನರಾವರ್ತನೆಯನ್ನು ನಿವಾರಿಸುತ್ತದೆ ಮತ್ತು ಸ್ವಚ್ಛವಾದ ಕಾಂಪೊನೆಂಟ್ ರಚನೆಯನ್ನು ಉತ್ತೇಜಿಸುತ್ತದೆ. ಸಾಮಾನ್ಯ ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗಿಂತ ಭಿನ್ನವಾಗಿ, ಕಸ್ಟಮ್ ಹುಕ್ಸ್ ಯಾವುದೇ UI ಅನ್ನು ರೆಂಡರ್ ಮಾಡುವುದಿಲ್ಲ; ಅವು ಕೇವಲ ಲಾಜಿಕ್ ಅನ್ನು ಒಳಗೊಂಡಿರುತ್ತವೆ.

ಅವುಗಳನ್ನು ರಿಯಾಕ್ಟ್ ಸ್ಟೇಟ್ ಮತ್ತು ಲೈಫ್‌ಸೈಕಲ್ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಪ್ರವೇಶಿಸಬಹುದಾದ ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಫಂಕ್ಷನ್‌ಗಳೆಂದು ಯೋಚಿಸಿ. ಹೈಯರ್-ಆರ್ಡರ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಅಥವಾ ರೆಂಡರ್ ಪ್ರಾಪ್ಸ್‌ಗಳನ್ನು ಆಶ್ರಯಿಸದೆ, ವಿವಿಧ ಕಾಂಪೊನೆಂಟ್‌ಗಳ ನಡುವೆ ಸ್ಟೇಟ್‌ಫುಲ್ ಲಾಜಿಕ್ ಅನ್ನು ಹಂಚಿಕೊಳ್ಳಲು ಇವು ಒಂದು ಅದ್ಭುತ ಮಾರ್ಗವಾಗಿದೆ, ಇದು ಸಾಮಾನ್ಯವಾಗಿ ಓದಲು ಮತ್ತು ನಿರ್ವಹಿಸಲು ಕಷ್ಟಕರವಾದ ಕೋಡ್‌ಗೆ ಕಾರಣವಾಗಬಹುದು.

ಕಸ್ಟಮ್ ಹುಕ್ಸ್ ಏಕೆ ಬಳಸಬೇಕು?

ಕಸ್ಟಮ್ ಹುಕ್ಸ್ ಬಳಸುವುದರಿಂದ ಹಲವಾರು ಪ್ರಯೋಜನಗಳಿವೆ:

ನಿಮ್ಮ ಮೊದಲ ಕಸ್ಟಮ್ ಹುಕ್ ಅನ್ನು ರಚಿಸುವುದು

ಒಂದು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಯೊಂದಿಗೆ ಕಸ್ಟಮ್ ಹುಕ್ ರಚನೆ ಮತ್ತು ಬಳಕೆಯನ್ನು ವಿವರಿಸೋಣ: API ಯಿಂದ ಡೇಟಾವನ್ನು ಪಡೆಯುವುದು.

ಉದಾಹರಣೆ: useFetch - ಡೇಟಾ ಫೆಚಿಂಗ್ ಹುಕ್

ನಿಮ್ಮ ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ನೀವು ಆಗಾಗ್ಗೆ ವಿವಿಧ API ಗಳಿಂದ ಡೇಟಾವನ್ನು ಪಡೆಯಬೇಕಾಗಿದೆ ಎಂದು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ಪ್ರತಿ ಕಾಂಪೊನೆಂಟ್‌ನಲ್ಲಿ ಫೆಚ್ ಲಾಜಿಕ್ ಅನ್ನು ಪುನರಾವರ್ತಿಸುವ ಬದಲು, ನೀವು useFetch ಹುಕ್ ಅನ್ನು ರಚಿಸಬಹುದು.


import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const abortController = new AbortController();
    const signal = abortController.signal;

    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await fetch(url, { signal: signal });
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
        setError(null); // Clear any previous errors
      } catch (error) {
        if (error.name === 'AbortError') {
          console.log('Fetch aborted');
        } else {
          setError(error);
        }
        setData(null); // Clear any previous data
      } finally {
        setLoading(false);
      }
    };

    fetchData();

    return () => {
      abortController.abort(); // Cleanup function to abort the fetch on unmount or URL change
    };
  }, [url]); // Re-run effect when the URL changes

  return { data, loading, error };
}

export default useFetch;

ವಿವರಣೆ:

ಕಾಂಪೊನೆಂಟ್‌ನಲ್ಲಿ useFetch ಹುಕ್ ಬಳಸುವುದು

ಈಗ, ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್‌ನಲ್ಲಿ ಈ ಕಸ್ಟಮ್ ಹುಕ್ ಅನ್ನು ಹೇಗೆ ಬಳಸುವುದು ಎಂದು ನೋಡೋಣ:


import React from 'react';
import useFetch from './useFetch';

function UserList() {
  const { data: users, loading, error } = useFetch('https://jsonplaceholder.typicode.com/users');

  if (loading) return <p>ಬಳಕೆದಾರರನ್ನು ಲೋಡ್ ಮಾಡಲಾಗುತ್ತಿದೆ...</p>;
  if (error) return <p>ದೋಷ: {error.message}</p>;
  if (!users) return <p>ಯಾವುದೇ ಬಳಕೆದಾರರು ಕಂಡುಬಂದಿಲ್ಲ.</p>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name} ({user.email})</li>
      ))}
    </ul>
  );
}

export default UserList;

ವಿವರಣೆ:

ಸುಧಾರಿತ ಕಸ್ಟಮ್ ಹುಕ್ ಪ್ಯಾಟರ್ನ್‌ಗಳು

ಸರಳ ಡೇಟಾ ಫೆಚಿಂಗ್‌ಗೂ ಮೀರಿ, ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾದ ಲಾಜಿಕ್ ಅನ್ನು ಒಳಗೊಳ್ಳಲು ಕಸ್ಟಮ್ ಹುಕ್ಸ್‌ಗಳನ್ನು ಬಳಸಬಹುದು. ಇಲ್ಲಿ ಕೆಲವು ಸುಧಾರಿತ ಪ್ಯಾಟರ್ನ್‌ಗಳಿವೆ:

1. useReducer ನೊಂದಿಗೆ ಸ್ಟೇಟ್ ಮ್ಯಾನೇಜ್ಮೆಂಟ್

ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾದ ಸ್ಟೇಟ್ ಮ್ಯಾನೇಜ್ಮೆಂಟ್ ಸನ್ನಿವೇಶಗಳಿಗಾಗಿ, ನೀವು ಕಸ್ಟಮ್ ಹುಕ್ಸ್‌ಗಳನ್ನು useReducer ನೊಂದಿಗೆ ಸಂಯೋಜಿಸಬಹುದು. ಇದು ನಿಮಗೆ ಸ್ಟೇಟ್ ಪರಿವರ್ತನೆಗಳನ್ನು ಹೆಚ್ಚು ಊಹಿಸಬಹುದಾದ ಮತ್ತು ಸಂಘಟಿತ ರೀತಿಯಲ್ಲಿ ನಿರ್ವಹಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.


import { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function useCounter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  const increment = () => dispatch({ type: 'increment' });
  const decrement = () => dispatch({ type: 'decrement' });

  return { count: state.count, increment, decrement };
}

export default useCounter;

ಬಳಕೆ:


import React from 'react';
import useCounter from './useCounter';

function Counter() {
  const { count, increment, decrement } = useCounter();

  return (
    <div>
      <p>ಎಣಿಕೆ: {count}</p>
      <button onClick={increment}>ಹೆಚ್ಚಿಸಿ</button>
      <button onClick={decrement}>ಕಡಿಮೆ ಮಾಡಿ</button>
    </div>
  );
}

export default Counter;

2. useContext ನೊಂದಿಗೆ ಕಾಂಟೆಕ್ಸ್ಟ್ ಇಂಟಿಗ್ರೇಷನ್

ರಿಯಾಕ್ಟ್ ಕಾಂಟೆಕ್ಸ್ಟ್‌ಗೆ ಪ್ರವೇಶವನ್ನು ಸರಳಗೊಳಿಸಲು ಕಸ್ಟಮ್ ಹುಕ್ಸ್‌ಗಳನ್ನು ಸಹ ಬಳಸಬಹುದು. ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳಲ್ಲಿ ನೇರವಾಗಿ useContext ಬಳಸುವ ಬದಲು, ಕಾಂಟೆಕ್ಸ್ಟ್ ಪ್ರವೇಶ ಲಾಜಿಕ್ ಅನ್ನು ಒಳಗೊಂಡಿರುವ ಕಸ್ಟಮ್ ಹುಕ್ ಅನ್ನು ನೀವು ರಚಿಸಬಹುದು.


import { useContext } from 'react';
import { ThemeContext } from './ThemeContext'; // Assuming you have a ThemeContext

function useTheme() {
  return useContext(ThemeContext);
}

export default useTheme;

ಬಳಕೆ:


import React from 'react';
import useTheme from './useTheme';

function MyComponent() {
  const { theme, toggleTheme } = useTheme();

  return (
    <div style={{ backgroundColor: theme.background, color: theme.color }}>
      <p>ಇದು ನನ್ನ ಕಾಂಪೊನೆಂಟ್.</p>
      <button onClick={toggleTheme}>ಥೀಮ್ ಬದಲಾಯಿಸಿ</button>
    </div>
  );
}

export default MyComponent;

3. ಡಿಬೌನ್ಸಿಂಗ್ ಮತ್ತು ಥ್ರಾಟ್ಲಿಂಗ್

ಡಿಬೌನ್ಸಿಂಗ್ ಮತ್ತು ಥ್ರಾಟ್ಲಿಂಗ್ ಒಂದು ಫಂಕ್ಷನ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವ ದರವನ್ನು ನಿಯಂತ್ರಿಸಲು ಬಳಸುವ ತಂತ್ರಗಳಾಗಿವೆ. ಈ ಲಾಜಿಕ್ ಅನ್ನು ಒಳಗೊಳ್ಳಲು ಕಸ್ಟಮ್ ಹುಕ್ಸ್‌ಗಳನ್ನು ಬಳಸಬಹುದು, ಇದು ಈ ತಂತ್ರಗಳನ್ನು ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳಿಗೆ ಅನ್ವಯಿಸಲು ಸುಲಭವಾಗಿಸುತ್ತದೆ.


import { useState, useEffect, useRef } from 'react';

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
}

export default useDebounce;

ಬಳಕೆ:


import React, { useState } from 'react';
import useDebounce from './useDebounce';

function SearchInput() {
  const [searchValue, setSearchValue] = useState('');
  const debouncedSearchValue = useDebounce(searchValue, 500); // Debounce for 500ms

  useEffect(() => {
    // debouncedSearchValue ನೊಂದಿಗೆ ಹುಡುಕಾಟವನ್ನು ನಿರ್ವಹಿಸಿ
    console.log('ಹುಡುಕಲಾಗುತ್ತಿದೆ:', debouncedSearchValue);
    // console.log ಅನ್ನು ನಿಮ್ಮ ನಿಜವಾದ ಹುಡುಕಾಟ ಲಾಜಿಕ್‌ನೊಂದಿಗೆ ಬದಲಾಯಿಸಿ
  }, [debouncedSearchValue]);

  const handleChange = (event) => {
    setSearchValue(event.target.value);
  };

  return (
    <input
      type="text"
      value={searchValue}
      onChange={handleChange}
      placeholder="ಹುಡುಕಿ..."
    />
  );
}

export default SearchInput;

ಕಸ್ಟಮ್ ಹುಕ್ಸ್ ಬರೆಯಲು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

ನಿಮ್ಮ ಕಸ್ಟಮ್ ಹುಕ್ಸ್ ಪರಿಣಾಮಕಾರಿ ಮತ್ತು ನಿರ್ವಹಿಸಬಲ್ಲದು ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು, ಈ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸಿ:

ಜಾಗತಿಕ ಪರಿಗಣನೆಗಳು

ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸುವಾಗ, ಈ ಕೆಳಗಿನವುಗಳನ್ನು ನೆನಪಿನಲ್ಲಿಡಿ:

ಉದಾಹರಣೆ: ಕಸ್ಟಮ್ ಹುಕ್‌ನೊಂದಿಗೆ ಅಂತರರಾಷ್ಟ್ರೀಕರಿಸಿದ ದಿನಾಂಕ ಫಾರ್ಮ್ಯಾಟಿಂಗ್


import { useState, useEffect } from 'react';
import { DateTimeFormat } from 'intl';

function useFormattedDate(date, locale) {
  const [formattedDate, setFormattedDate] = useState('');

  useEffect(() => {
    try {
      const formatter = new DateTimeFormat(locale, {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
      });
      setFormattedDate(formatter.format(date));
    } catch (error) {
      console.error('ದಿನಾಂಕವನ್ನು ಫಾರ್ಮ್ಯಾಟ್ ಮಾಡುವಲ್ಲಿ ದೋಷ:', error);
      setFormattedDate('ಅಮಾನ್ಯ ದಿನಾಂಕ');
    }
  }, [date, locale]);

  return formattedDate;
}

export default useFormattedDate;

ಬಳಕೆ:


import React from 'react';
import useFormattedDate from './useFormattedDate';

function MyComponent() {
  const today = new Date();
  const enDate = useFormattedDate(today, 'en-US');
  const frDate = useFormattedDate(today, 'fr-FR');
  const deDate = useFormattedDate(today, 'de-DE');

  return (
    <div>
      <p>US ದಿನಾಂಕ: {enDate}</p>
      <p>ಫ್ರೆಂಚ್ ದಿನಾಂಕ: {frDate}</p>
      <p>ಜರ್ಮನ್ ದಿನಾಂಕ: {deDate}</p>
    </div>
  );
}

export default MyComponent;

ತೀರ್ಮಾನ

ರಿಯಾಕ್ಟ್ ಕಸ್ಟಮ್ ಹುಕ್ಸ್ ಕಾಂಪೊನೆಂಟ್ ಲಾಜಿಕ್ ಅನ್ನು ಹೊರತೆಗೆಯಲು ಮತ್ತು ಮರುಬಳಕೆ ಮಾಡಲು ಪ್ರಬಲವಾದ ಕಾರ್ಯವಿಧಾನವಾಗಿದೆ. ಕಸ್ಟಮ್ ಹುಕ್ಸ್ ಬಳಸುವುದರಿಂದ, ನೀವು ಸ್ವಚ್ಛವಾದ, ಹೆಚ್ಚು ನಿರ್ವಹಿಸಬಲ್ಲ ಮತ್ತು ಪರೀಕ್ಷಿಸಬಲ್ಲ ಕೋಡ್ ಅನ್ನು ಬರೆಯಬಹುದು. ನೀವು ರಿಯಾಕ್ಟ್‌ನಲ್ಲಿ ಹೆಚ್ಚು ಪ್ರವೀಣರಾದಂತೆ, ಕಸ್ಟಮ್ ಹುಕ್ಸ್‌ಗಳನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳುವುದು ಸಂಕೀರ್ಣ ಮತ್ತು ವಿಸ್ತರಿಸಬಲ್ಲ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವ ನಿಮ್ಮ ಸಾಮರ್ಥ್ಯವನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಸುಧಾರಿಸುತ್ತದೆ. ಕಸ್ಟಮ್ ಹುಕ್ಸ್‌ಗಳನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸುವಾಗ ಅವು ಪರಿಣಾಮಕಾರಿ ಮತ್ತು ವೈವಿಧ್ಯಮಯ ಪ್ರೇಕ್ಷಕರಿಗೆ ಪ್ರವೇಶಸಾಧ್ಯವೆಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸಲು ಮತ್ತು ಜಾಗತಿಕ ಅಂಶಗಳನ್ನು ಪರಿಗಣಿಸಲು ಮರೆಯದಿರಿ. ಕಸ್ಟಮ್ ಹುಕ್ಸ್‌ಗಳ ಶಕ್ತಿಯನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ ಮತ್ತು ನಿಮ್ಮ ರಿಯಾಕ್ಟ್ ಅಭಿವೃದ್ಧಿ ಕೌಶಲ್ಯಗಳನ್ನು ಉನ್ನತೀಕರಿಸಿ!